<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 250px;
            height: 250px;
            border: 1px solid #000;
            margin: 20px auto;
        }
        /*
            径向渐变：
            radial-gradient（辐射半径, 中心的位置，起始颜色，终止颜色）;
            中心点位置：at  left  right  center bottom  top
            at后面的都表示坐标，在at前面写的话，就是辐射半径
        */
        div:nth-child(1){
            background-image: radial-gradient(at left top,yellow,green);
        }

        div:nth-child(2){
            background-image: radial-gradient(at 50px 50px,yellow,green);
        }

        div:nth-child(3){
            background-image: radial-gradient(100px at center,yellow ,green);
        }

        div:nth-child(4){
            background-image: radial-gradient(100px at center,
            yellow 0% ,
            green 30%,
            blue 60%,
            red 100%);
        }

        div:nth-child(5){
            background-image: radial-gradient(100px 50px  at center,yellow ,green);
        }


    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>